/** @jsxImportSource @emotion/react */
import logo from './logo.svg';
import './App.css';
import React, {useEffect,useRef,useState} from 'react';
import {css} from '@emotion/react';

// const todoList = [
//   {title: '开发任务-1', status: '22-05-22 18:15'},
//   {title: '开发任务-3', status: '22-05-22 18:15'},
//   {title: '开发任务-5', status: '22-05-22 18:15'},
//   {title: '测试任务-3', status: '22-05-22 18:15'}
// ];
const ongoingList = [
  // {title: '开发任务-4', status: '22-05-22 18:15'},
  {title: '开发任务-4', status: '2022-05-22 18:15'},
  {title: '开发任务-6', status: '22-05-22 18:15'},
  {title: '开发任务-2', status: '22-05-22 18:15'},
];
const doneList = [
  {title: '开发任务-2', status: '22-05-22 18:15'},
  {title: '开发任务-1', status: '22-05-22 18:15'},
];
const KanbanBoard = ({children}) => (
  // <main className='kanban-board'>{children}</main>
  <main css={css`flex:10;display:flex;flex-direction:row;gap:1rem;margin:0 1rem 1rem;`}>{children}</main>
);
const KanbanColumn = ({children, className, title}) => {
  // const combinedClassName = `kanban-column ${className}`;
  return (
    // <section className={combinedClassName}>
    <section className={className} css={css`
      flex: 1 1;
      display:flex;
      flex-direction:column;
      border:1px solid gray;
      border-radius: 1rem;

      & > h2 {
        margin: 0.6rem 1rem;
        padding-bottom: 0.6rem;
        border-bottom: 1px solid gray;

        & > button{
          float:right;
          margin-top: 0.2rem;
          padding:0.2rem 0.5rem;
          border: 0;
          border-radius: 1rem;
          height: 1.8rem;
          line-height: 1rem;
          font-size: 1rem;
        }
      }

      & > ul {
        flex:1;
        flex-basis: 0;
        margin: 1rem;
        padding:0;
        overflow: auto;
      }
      `}>
    <h2>{title}</h2>
    <ul>{children}</ul>
    </section>
  )
}
const KanbanCardStyles = css`
  margin-bottom: 1rem;
  padding: 0.6rem 1rem;
  border: 1px solid gray;
  border-radius: 1rem;
  list-style: none;
  background-color: rgba(255,255,255,0.4);
  text-align: left;

  &:hover {
    box-shadow: 0 0.2rem 0.2rem rgba(0,0,0,0.2), inset 0 1px #fff;
  }
`;
const KanbanCardTitleStyles = css`
  min-height: 3rem;
`;
const MINUTE = 60 * 1000;
const HOUR = 60 * MINUTE;
const DAY = 24 * HOUR;
const UPDATE_INTERVAL = MINUTE;
const KanbanCard = ({title, status}) => {
  const [displayTime,setDisplayTime] = useState(status);
  useEffect(() => {    
    const updateDisplayTime = () => {      
      const timePassed = new Date() - new Date(status);      
      let relativeTime = '刚刚';      
      if (MINUTE <= timePassed && timePassed < HOUR) {        
        relativeTime = `${Math.ceil(timePassed / MINUTE)} 分钟前`;     
       } else if (HOUR <= timePassed && timePassed < DAY) {       
         relativeTime = `${Math.ceil(timePassed / HOUR)} 小时前`;      
        } else if (DAY <= timePassed) {        
          relativeTime = `${Math.ceil(timePassed / DAY)} 天前`;      
        }      setDisplayTime(relativeTime);    
      };    
      const intervalId = setInterval(updateDisplayTime, UPDATE_INTERVAL);    
      updateDisplayTime();    
      return function cleanup() {      
        clearInterval(intervalId);    
      };  
    }, [status]);
  return (
    // <li className='kanban-card'>
    <li css={KanbanCardStyles}>
      {/* <div className='card-title'>{title}</div> */}
      <div css={KanbanCardTitleStyles}>{title}</div>
      {/* <div className='card-status'>{status}</div> */}
      <div css={css`
        text-align: right;
        font-size: 0.8rem;
        color: #333;
      `} title={status}>{displayTime}</div>
    </li>
  )
};
const KanbanNewCard = ({onSubmit}) => {
  const [title, setTitle] = useState('');
  const inputElem = useRef(null);
  useEffect(() =>{
    inputElem.current.focus();
  },[]);
  const handleChange = (evt) => {
    setTitle(evt.target.value);
  };
  const handleKeyDown = (evt) => {
    if(evt.key === 'Enter') {
      onSubmit(title);
    }
  }
  return (
    // <li className='kanban-card'>
    <li css={KanbanCardStyles}>
      <h3>添加新卡片</h3>
      {/* <div className='card-title'> */}
      {/* <div css={KanbanCardTitleStyles}> */}
      <div css={css`
        ${KanbanCardTitleStyles}

        & > input[type="text"] {
          width: 80%;
        }
      `}>
        <input type="text" value={title} ref={inputElem} onChange={handleChange} onKeyDown={handleKeyDown} />
      </div>
    </li>
  );
};
const DATA_STORE_KEY = 'kanban-data-store';
function App() {
  const [showAdd, setShowAdd] = useState(false);
  const [todoList, setTodoList] = useState([
    {title: '开发任务-1', status: '22-05-22 18:15'},
    {title: '开发任务-3', status: '22-05-22 18:15'},
    {title: '开发任务-5', status: '22-05-22 18:15'},
    {title: '测试任务-3', status: '22-05-22 18:15'}
  ]);
  const [ongoingList, setOngoingList ] = useState([/*...省略*/]); 
  const [doneList, setDoneList ] = useState([/*...省略*/]); 
  useEffect(() => { 
    const data = window.localStorage.getItem(DATA_STORE_KEY); 
    setTimeout(() => { 
      if (data) { 
        const kanbanColumnData = JSON.parse(data); 
        setTodoList(kanbanColumnData.todoList); 
        setOngoingList(kanbanColumnData.ongoingList); 
        setDoneList(kanbanColumnData.doneList); 
      } 
    }, 1000); 
  },[]);
  const handleSaveAll = () => { 
    const data = JSON.stringify({ todoList, ongoingList, doneList }); 
    window.localStorage.setItem(DATA_STORE_KEY, data); 
  };
  const handleAdd = (evt) => {
    setShowAdd(true);
  };
  const handleSubmit = (title) => {
    // todoList.unshift({title, status: new Date().toDateString() });
    setTodoList(currentTodoList => [
      {title, status: new Date().toDateString()},
      ...currentTodoList
    ]);
    setShowAdd(false);
  };
  return (
    <div className="App">
      <header className="App-header">
        <h1>我的看板 <button onClick={handleSaveAll}>保存所有卡片</button></h1>
        <img src={logo} className="App-logo" alt="logo" />
      </header>
      {/* <main className='kanban-board'> */}
      <KanbanBoard>
        {/* <section className='kanban-column column-todo'> */}
        <KanbanColumn className='kanban-column column-todo' title={
          <>
            待处理<button onClick={handleAdd} disabled={showAdd}>&#8853; 添加新卡片</button>
          </>
          }>
          {/* <h2>待处理<button onClick={handleAdd} disabled={showAdd}>&#8853; 添加新卡片</button></h2> */}
          {/* <ul> */}
          {/* {
            new Array(10).fill('').map(item => (
              <li className='kanban-card'>
                <div className='card-title'>开发任务-1</div>
                <div className='card-status'>22-05-22 18:15</div>
              </li>
            ))
          } */}
          {showAdd && <KanbanNewCard onSubmit={handleSubmit} />}
          {todoList.map(props => <KanbanCard {...props} />)}
          {/* </ul> */}
        {/* </section> */}
        </KanbanColumn>
        {/* <section className='kanban-column column-ongoing'> */}
        <KanbanColumn className='kanban-column column-ongoing' title="进行中">
          {/* <h2>进行中</h2>
          <ul> */}
            {ongoingList.map(props => <KanbanCard {...props} />)}
          {/* </ul> */}
        {/* </section> */}
        </KanbanColumn>
        {/* <section className='kanban-column column-done'> */}
        <KanbanColumn className='kanban-column column-done' title="已完成">
          {/* <h2>已完成</h2>
          <ul> */}
            {doneList.map(props => <KanbanCard {...props} />)}
          {/* </ul> */}
        {/* </section> */}
        </KanbanColumn>
        </KanbanBoard>
      {/* </main> */}
    </div>
  );
}

export default App;
